<template>
  <div class="component-imgas-upload">
    <vue-draggable-next
      v-model="imageList"
      class="el-upload-list--picture-card"
      @start="onDragStart"
      @end="onDragEnd"
    >
      <!--拷贝上传图片组件生成的预览图元素代码，用绑定的model循环生成可拖拽元素-->
      <li
        v-for="(item, index) in imageList"
        :key="index"
        tabindex="0"
        class="el-upload-list__item is-success"
      >
        <img-show
          :src="item.url"
          class="el-upload-list__item-thumbnail"
        />
        <a class="el-upload-list__item-name">
          <el-icon><Document /></el-icon>
        </a>
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview">
            <el-icon @click="handlePictureCardPreview(item.url)"><ZoomIn /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(index)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </li>
      <li
        v-if="!disabled && imageList.length < props.limit"
        class="el-upload-list__item"
        @click="elxImgboxHandle"
      >
        <div
          tabindex="0"
          class="el-upload el-upload--picture-card"
        >
          <el-icon><Plus /></el-icon>
        </div>
        <!-- 弹窗, 新增图片 -->
        <elx-imgbox
          v-if="elxImgBoxVisible"
          ref="elxImgBoxRef"
          @refresh-pic="refreshPic"
        />
      </li>
    </vue-draggable-next>
    <div
      v-if="size"
      class="tips-txt"
    >
      {{ $t('components.photoSize') + size + $t('components.px') }}
    </div>
    <div
      v-if="prompt"
      class="tips-txt"
    >
      {{ $t('components.maxiNumPicture') }}:{{ props.limit }}
    </div>
    <el-dialog
      v-model="dialogVisible"
      append-to-body
      :modal="true"
      top="10vh"
      class="pop-up-images"
    >
      <img
        class="pic"
        :src="dialogImageUrl"
        alt
      >
    </el-dialog>
  </div>
</template>

<script setup>
import { VueDraggableNext } from 'vue-draggable-next'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['update:modelValue'])
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
const imageList = ref([])
const props = defineProps({
  modelValue: {
    default: '',
    type: String
  },
  // 最大上传数量
  limit: {
    default: 6,
    type: Number
  },
  // false: 能对图片进行操作  true: 不能对图片进行操作
  disabled: {
    default: false,
    type: Boolean
  },
  // 遮罩层异常时，更改此参数为 ’false‘ 即可
  modal: {
    default: true,
    type: Boolean
  },
  usePrefix: {
    default: true,
    type: Boolean
  },
  // 限制图片数量提示
  prompt: {
    default: true,
    type: Boolean
  },
  // 图片规格提示
  size: {
    default: '',
    type: String
  }
})

watch(
  () => props.modelValue,
  () => {
    const res = []
    if (props.modelValue) {
      const imageArray = props.modelValue.split(',')
      for (let i = 0; i < imageArray.length; i++) {
        res.push({ url: resourcesUrl + imageArray[i], response: imageArray[i] })
      }
    }
    imageList.value = res
  }
)
watch(imageList, () => {
  const pics = imageList.value
    .map(file => {
      return file.response
    })
    .join(',')
  emit('update:modelValue', pics)
})
/**
 * 删除图片
 */
const handleRemove = index => {
  imageList.value.splice(index, 1)
  const pics = imageList.value
    .map(file => {
      return file.response
    })
    .join(',')
  emit('update:modelValue', pics)
}
/**
 * 放大图片
 */
const dialogVisible = ref(false)
const dialogImageUrl = ref('')

const handlePictureCardPreview = imgUrl => {
  dialogImageUrl.value = imgUrl
  dialogVisible.value = true
}
const onDragStart = e => {
  e.target.classList.add('hideShadow')
}
const onDragEnd = e => {
  e.target.classList.remove('hideShadow')
}
/**
 * 打开图片选择窗
 */
const elxImgBoxRef = ref(null)
const elxImgBoxVisible = ref(false)

const elxImgboxHandle = () => {
  const num = props.limit - imageList.value.length
  if (num < 1) {
    ElMessage.error('可选择照片数量已达上限')
    return
  }
  elxImgBoxVisible.value = true
  nextTick(() => {
    elxImgBoxRef.value?.init(0, num)
  })
}
/**
 * 接收回调的图片数据
 */
const refreshPic = imagePath => {
  const imageArray = imagePath.split(',')
  let pics = imageArray
    .map(img => {
      return img
    })
    .join(',')
  if (props.modelValue) {
    pics = props.modelValue + ',' + pics
  }
  emit('update:modelValue', pics)
}
</script>

<style lang="scss" scoped>
.component-imgas-upload {
  .el-upload--picture-card {
    border: 0;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .hideShadow {
    .el-upload-list__item-actions {
      display: none;
    }
  }
  img {
    object-fit: contain;
  }
  .tips-txt {
    color: #999;
  }
}
</style>
<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
<style lang="scss">
.pop-up-images{
  .el-dialog__header{
    border: 0;
  }
  .el-dialog__body{
    overflow-y: hidden;
    display: flex;
  }
  .pic{
    width: 100%;
    object-fit: contain;
  }
}
</style>
